{% extends "layouts/base.html" %}
{% load i18n %}

{% block content %}
<div class="container mt-5">
  <div class="card shadow-lg p-4">
    <h2 class="mb-4 text-center">{% trans "Meus Pedidos Pendentes" %}</h2>

    {% if pedidos %}
      <div class="list-group">
        {% for pedido in pedidos %}
          <div class="list-group-item d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-3 py-3">
            <div>
              <strong>{% trans "Pedido" %} #{{ pedido.id }}</strong><br>
              {% trans "Valor:" %} R$ {{ pedido.valor_pago }}<br>
              {% trans "Criado em:" %} {{ pedido.data_criacao|date:"d/m/Y H:i" }}
            </div>
            <div class="d-flex flex-wrap justify-content-end gap-2">
              <a href="{% url 'payment:detalhes_pedido' pedido.id %}" class="btn btn-sm btn-primary">
                {% trans "Detalhes" %}
              </a>
              <form method="post" action="{% url 'payment:cancelar_pedido' pedido.id %}">
                {% csrf_token %}
                <button type="submit" class="btn btn-sm btn-danger">
                  {% trans "Cancelar" %}
                </button>
              </form>
            </div>
          </div>
        {% endfor %}
      </div>
    {% else %}
      <p class="text-center">{% trans "Você não possui pedidos pendentes." %}</p>
    {% endif %}

    <div class="text-center mt-4 d-grid gap-2 d-sm-flex justify-content-sm-center">
      <a href="{% url 'payment:novo_pedido' %}" class="btn btn-success">
        {% trans "Criar Novo Pedido" %}
      </a>
      <a href="{% url 'wallet:dashboard' %}" class="btn btn-primary">
        {% trans "Voltar para a Carteira" %}
      </a>
    </div>
  </div>
</div>
{% endblock %}
